<template>
  <div class="hello">
    <Row>
      <Cell width="12">
        <Table
          ref="table"
          :datas="roles"
          :border="true"
          :checkbox="false"
          :stripe="true"
          :loading="loading"
          :selectRow="true"
          @trclick="selectRole"
        >
          <TableItem title="名称" prop="name"></TableItem>
          <TableItem title="KEY" prop="roleKey"></TableItem>
          <TableItem title="是否固定">
            <template slot-scope="{data}">
              {{data.fixed ? "是" : "否"}}
              <!-- $data 表示当前组件的所有数据，也就是data()函数返回的对象 -->
              <!-- data 是 template 里面的局部变量，根据slot-scope来决定 -->
              <!-- loadRoles是当前组件的一个函数，把函数名称传递给下一个组件的时候，在下级组件中可以直接调用 -->
              <DeleteRoleButton v-bind:outData="$data" :role="data" :callback="loadRoles"/>
            </template>
          </TableItem>
          <div slot="empty">自定义提醒：暂时无数据</div>
        </Table>
      </Cell>
      <Cell width="12">
        <!-- validOnChange 是否在表单内容改变的时候，执行表单的验证 -->
        <!-- showErrorTip 是否以tip的方式来提示验证错误信息，会在屏幕中间的上方出现提示信息 -->
        <!-- validationRules 是一个数组，用于执行表单的验证规则 -->
        <!-- model 表单里面的数据对象 -->
        <Form
          ref="form"
          :validOnChange="true"
          :showErrorTip="false"
          labelPosition="left"
          :labelWidth="110"
          :rules="validationRules"
          :model="currentRole"
        >
          <FormItem label="角色名称" prop="name">
            <!-- v-slot是一个插槽，插槽的名称为label，表示要把template里面的内容，插入到插槽 -->
            <template v-slot:label>
              <i class="h-icon-user"></i>角色名称
            </template>
            <input type="text" v-model="currentRole.name" />
          </FormItem>
          <FormItem label="KEY" icon="h-icon-complete" prop="roleKey">
            <input type="text" v-model="currentRole.roleKey" />
          </FormItem>
          <FormItem prop="fixed">
            <h-switch v-model="currentRole.fixed">是否固定</h-switch>
          </FormItem>
          <FormItem>
            <Button color="primary" :loading="isCommitting" @click="submit">提交</Button>&nbsp;&nbsp;&nbsp;
            <Button @click="reset">重置</Button>
          </FormItem>
        </Form>
      </Cell>
    </Row>
  </div>
</template>

<script>
import axios from "axios";
import DeleteRoleButton from "./DeleteRoleButton";
export default {
  components: {
    DeleteRoleButton
  },
  data() {
    return {
      // 所有的角色
      roles: [],
      // 是否正在加载所有角色
      loading: false,
      // 当前选中的角色
      currentRole: {
        name: null,
        roleKey: null,
        fixed: false
      },
      // 是否正在提交表单
      isCommitting: false,
      // 配置表单的验证规则
      validationRules: {
        // 完整手册 https://github.com/heyui/hey-validator
        // 基础验证：required是一个特殊的属性，表示必须的
        // rules: {},          // 单个数据验证
        // combineRules: {},   // 多个数据合并验证
        // required:[],        // 是否必填
        // int:[],             // 整数
        // number:[],          // 数字
        // email:[],           // 邮箱
        // url:[],             // 网址
        // tel:[],             // 电话号码
        // mobile:[],          // 手机号
        // globalmobile:[]     // 国际号码
        required: ["name", "roleKey"],
        // 自定义复杂验证规则
        rules: {
          roleKey: {
            // required    // 是否必填
            // maxLen      // 最大长度
            // minLen      // 最小长度
            // max         // 最大值
            // min         // 最小值
            // valid       // 正则表达式验证
            minLen: 3,
            maxLen: 10,
            valid: {
              pattern: /^[A-Z_]+$/,
              message: "KEY只能是大写字母和下划线"
            }
          },
          name: {
            minLen: 3
          }
        }
      }
    };
  },
  methods: {
    submit() {
      let valid = this.$refs.form.valid();
      // valid.result为true表示表单验证通过
      if (valid.result) {
        axios.post("/api/user-center/role", this.currentRole).then(response => {
          if (response.data.code === 1) {
            this.$Message({ type: "success", text: "角色保存成功" });
            this.loadRoles();
            this.reset();
          } else {
            this.$Message({ type: "error", text: response.data.message });
          }
        });
      }
    },
    reset() {
      this.currentRole = {
        name: null,
        roleKey: null,
        fixed: false
      };
    },
    loadRoles() {
      axios.get("/api/user-center/role").then(response => {
        this.roles = response.data;
      });
    },
    selectRole(role, event, index) {
      // 如果是固定的，不允许修改，可以选中
      this.currentRole = role;

      // Vue.js其实并不建议直接修改DOM。
      // 如果以后遇到这种复杂问题，应该扩展已有的组件（使用自定义组件）。
      // this.$refs.table.$el 表示得到表格本身的HTML元素
      // table是ref的值
      // let buttons = this.$refs.table.$el.querySelectorAll("button");
      // for (let i = 0; i < buttons.length; i++) {
      //   if (i === index) {
      //     buttons[i].style.display = "";
      //   } else {
      //     buttons[i].style.display = "none";
      //   }
      // }
    }
  },
  mounted() {
    this.loadRoles();
  }
};
</script>